<template>
	<div class="container home">
		<div class="header subheader">
			<Header></Header>
		</div>
		<el-button style="margin-top:20px" @click="goBack">返回</el-button>
		<div class="container-main" style="padding-top:15px">
			<!-- <div class="position-main">
				<div class="wd1200">
					<div class="position"><span>首页</span><span>预警通</span><span>我收藏的企业</span>添加企业</div>
				</div>
			</div> -->
			<div class="wd12000">
				<div class="search-main overflow">
					<div class="search-right fr">
						<el-button type="primary" @click="searchbt">搜索</el-button>
					</div>
					<div class="search-left overflow"><el-input v-model="companyName" placeholder="请输入企业名称"></el-input></div>
				</div>

				<div class="enterprise-list" v-loading="loading">
					<template v-if="enterpriselist.length > 0">
					<div class="list overflow" v-for="item in enterpriselist" :key="item.companyId">
						<div class="tag fl">{{item.companyName.substr(0, 2)}}</div>
						<div class="text overflow">
							<div class="title">{{item.companyName}} <el-tag size="small">{{item.companyStatus}}</el-tag></div>
							<div class="info">
								<div class="box">法定代表人：{{item.legalPerson}}</div>
								<div class="box" v-if="item.establishDate != null">注册日期：{{item.establishDate.substr(0, 10)}}</div>
								<div class="box" v-else>--</div>
								<!-- <div class="box">注册资本：{{item.CAPITAL}}</div> -->
							</div>
							<div class="address"><span>企业地址：</span>{{item.companyAddress}}</div>
							<div class="r-bt">
								<el-button v-if="item.collectId != null" @click="collectremove(item.collectId)">取消自选</el-button>
								<el-button v-if="item.collectId == null" type="primary" @click="collectadd(item.companyId,item.companyName,item.establishDate,item.companyStatus,item.legalPerson,item.companyAddress,item.capitalNum)"><i class="el-icon-plus"></i> 自选</el-button>
								<!-- <el-button @click="details(item.COMPANY_ID,item.CREDIT_NO)" type="primary">查看详情</el-button> -->
							</div>
						</div>
					</div>
					</template>
					<div class="pagination" v-if="total > 0">
						<el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
							 :page-size="20" :total="total">
						</el-pagination>
					</div>
					<template v-else>
						<el-empty :image-size="200"></el-empty>
					</template>
				</div>
				
				<div class="clearfix"></div>
			</div>

		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import {
		addapi,
		removeapi
	} from "@/api/enterprise/index";
	import {
		collectlistapi,
		addsearchapi,
	} from "@/api/warning/index";
	import Header from "@/components/header";
	import Footer from "@/components/footer";
	export default {
		components: {
			Header,
			Footer
		},
		data() {
			return {
				
				pageNumber: 1,
				pageSize: 5,
				enterpriselist: [],
				total: 0,
				loading: true,
				companyName:''
			}
		},
		mounted() {
			if(JSON.parse(sessionStorage.getItem('user') != null)){
				this.userdata = JSON.parse(sessionStorage.getItem('user'));
				this.userId = JSON.parse(sessionStorage.getItem('userId'));
				this.phonenumber = this.userdata.phonenumber
			}
			function formatDate(date) {
			  const year = date.getFullYear();
			  const month = ('0' + (date.getMonth() + 1)).slice(-2);
			  const day = ('0' + date.getDate()).slice(-2);
			  const hours = ('0' + date.getHours()).slice(-2);
			  const minutes = ('0' + date.getMinutes()).slice(-2);
			  const seconds = ('0' + date.getSeconds()).slice(-2);
			  return `${year}-${month}-${day}`;
			}
			const date = new Date();
			this.endDate = formatDate(date);
			// this.listinit()
			// this.countinit()
			this.searchbt()
		},
		methods:{
			goBack() {
			    this.$router.go(-1); // 或者 this.$router.back()
			},
			searchbt(){
				this.loading = true
				this.enterpriselist = []
				this.total = 0
				let queryParams = {
					companyName:"%"+this.companyName+"%",
					endDate:this.endDate,
					pageNumber:this.pageNumber,
					pageSize:20,
					phonenumber:this.phonenumber,
					userId:this.userId
				}
				addsearchapi(queryParams).then(res => {
					this.loading = false
					this.enterpriselist = res.data.content
					this.total = res.data.total
				})
			},
			handleCurrentChange(val){
				this.loading = true
				this.pageNumber = val
				this.searchbt()
			},
			collectadd(companyId,companyName,establishDate,companyStatus,legalPerson,companyAddress,capitalNum) {
				let queryParams = {
					capitalNum:capitalNum,
					companyAddress:companyAddress,
					companyId:companyId,
					companyName:companyName,
					companyStatus:companyStatus,
					establishDate:establishDate,
					legalPerson:legalPerson,
					phonenumber:this.phonenumber,
					userId:this.userId
			
				}
				addapi(queryParams).then(res => {
					if(res.errcode == 0){
						this.$message({
						  showClose: true,
						  message: '自选成功',
						  type: 'success'
						});
						this.loading = true
						this.searchbt()
					}
				});
			},
			collectremove(id) {
				removeapi(id).then(res => {
					if(res.errcode == 0){
						this.$message({
						  showClose: true,
						  message: '取消成功',
						  type: 'success'
						});
						this.loading = true
						this.searchbt()
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.home {
		.subheader {
			height: 100px;
			background: linear-gradient(180deg, #3460D7 0%, #3D62CC 100%);

			.navbar {
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				height: 100px;
				padding: 0 30px;

				.logo {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100px;
					font-size: 26px;
					color: #fff;
					font-weight: bold;
					margin-right: 8%;

					img {
						margin-right: 11px;
					}
				}

				.nav {
					display: flex;
					height: 100px;
					justify-content: center;
					align-items: center;
					font-size: 20px;
					color: #fff;
					font-weight: bold;

					.box {
						position: relative;
						height: 100px;
						line-height: 100px;

						span {
							position: absolute;
							left: 0;
							bottom: 0;
							height: 5px;
							background: #fff;
							display: block;
							width: 60px;
						}
					}

					.box::after {
						content: "|";
						margin: 0 36px;
						color: rgba(255, 255, 255, 0.2);
						font-weight: initial;
						font-size: 18px;
					}

					.box:last-child::after {
						display: none;
					}

				}

				.user {
					display: flex;
					height: 95px;
					justify-content: center;
					align-items: center;

					.box {
						font-size: 16px;
						line-height: 28px;
						color: #FFFFFF;
						font-weight: 400;
						background: url(../../assets/images/usericon.png) no-repeat left center;
						padding-left: 22px;
					}

					.bt {
						width: 62px;
						height: 28px;
						line-height: 28px;
						text-align: center;
						background: #FFFFFF;
						border-radius: 5px 5px 5px 5px;
						font-size: 12px;
						color: #000000;
						font-weight: 400;
						margin-left: 10px;
						cursor: pointer;
					}
				}
			}

			.slogan {
				color: #fff;
				font-size: 42px;
				color: #FFFFFF;
				text-align: center;
				font-weight: bold;
				letter-spacing: 3px;
				line-height: 55px;
				padding: 84px 0 54px;
			}

			.search {
				display: flex;
				justify-content: center;
				align-items: center;

				.box {
					display: flex;

					.search-bt {
						width: 120px;
						height: 53px;
						background: #217FE4;
						border-radius: 0px 4px 4px 0px;
						font-size: 22px;
						color: #FFFFFF;
						font-weight: 400;
						text-align: center;
						line-height: 53px;
						letter-spacing: 2px;
					}
				}

				.advanced-search {
					width: 32px;
					height: 40px;
					line-height: 20px;
					font-size: 16px;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 12px;
					cursor: pointer;
				}
			}
		}

		.position-main {
			border-bottom: 1px solid #E8EAEC;
			margin-bottom: 34px;
		}

		.position {
			font-weight: 400;
			font-size: 18px;
			color: #6F6F6F;
			line-height: 24px;
			margin: 24px 0;
			background: url(../../assets/images/iconhome.png) no-repeat left center;
			padding-left: 26px;

			span {
				color: #0071DF;
			}

			span::after {
				content: '/';
				margin: 0 12px;
				color: #6F6F6F;
			}
		}

		.search-main {
			.search-right {
				margin-left: 16px;
			}
		}

		.favorite-companies {
			.title {
				font-weight: 400;
				font-size: 15px;
				color: #000000;
				line-height: 52px;

				span {
					color: #FF8C1A
				}
			}
		}

		.enterprise-list {
			min-height: 300px;
			.list {
				padding: 36px 0;
				border-bottom: 1px solid #E8EAEC;
				color: #000000;
				font-size: 16px;

				.tag {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 72px;
					height: 72px;
					border-radius: 4px 4px 4px 4px;
					background: #7DB3DA;
					font-size: 22px;
					color: #fff;
					margin-right: 24px;
				}

				.text {
					position: relative;
				}

				.title {
					font-size: 18px;
					font-weight: bold;
					line-height: 24px;
					margin-bottom: 14px;
				}

				.info {
					display: flex;
					margin-bottom: 14px;

					.box {
						font-weight: 400;
						line-height: 21px;
						margin-right: 60px;
						background: url(../../assets/images/icon01.png) no-repeat left center;
						padding-left: 20px;
					}

					.box:nth-child(2) {
						background: url(../../assets/images/icon02.png) no-repeat left center;
					}

					.box:nth-child(3) {
						background: url(../../assets/images/icon03.png) no-repeat left center;
					}

					.box:nth-child(4) {
						background: url(../../assets/images/icon04.png) no-repeat left center;
					}

					.box:last-child {
						margin-right: 0;
					}
				}

				.address {
					font-weight: 400;
					line-height: 21px;

					span {
						color: #999999;
					}
				}

				.r-bt {
					position: absolute;
					right: 0;
					top: 50%;
					// width: 112px;
					height: 40px;
					// background: #217FE4;
					border-radius: 2px;
					text-align: center;
					line-height: 40px;
					color: #fff;
					font-size: 16px;
					font-weight: 400;
					transform: translateY(-50%);
					// cursor: pointer;
				}
			}

		}

		.pagination {
			float: right;
			margin-top: 30px;
		}

	}
</style>
<style>
	.el-table .cell {
		font-size: 16px;
		color: #000000;
		line-height: 25px;
		padding: 5px 20px;
		font-weight: 400;
	}

	.dialogtable .el-table .cell .el-table--border .el-table__cell:first-child .cell {
		padding-left: 20px;
	}

	.el-table .el-table__header-wrapper th,
	.el-table .el-table__fixed-header-wrapper th {
		background: #F7FBFF;
	}

	.dialogtable .el-table .cell {
		font-size: 14px;
		padding: 2px 15px;
	}

	.el-dialog__header {
		border-bottom: 2px dashed #eee;
	}
</style>